<template>
    <DialogCom :draggable="true" :title="title" :width="'500'" :visible="isVisible" @close="close" @confirm="confirm">
        <template v-slot:content>
            <div class="source">
                <span @click="currentSource = 'lib'" :class="{ 'actived': currentSource == 'lib' }">资源库</span>
                /
                <span @click="currentSource = 'dataset'" :class="{ 'actived': currentSource == 'dataset' }">数据集</span>
            </div>
            <div class="lib-content" v-if="currentSource == 'lib'">
                <div v-for="(item, index) in geometryRef" :key="index" @click="currentChange(item, index)"
                    class="img-box">
                    <div class="img" :class="{ 'is-active': isHighLight == index }">
                        <img :src="item.thumb ? `${cimrtsIpRef}/lib/geometry/thumb/${item.thumb}` : require('@/assets/no-img.png')"
                            alt="">
                    </div>
                    <div class="name" :title="item.name">{{ item.name }}</div>
                </div>
            </div>
            <div class="dataset-content" v-if="currentSource == 'dataset'">
                <div class="xbsj-table">
                    <el-table :data="dataSetRef" border :cell-style="cellStyle2" :header-cell-style="cellStyleSmall"
                    highlight-current-row @row-click="handleRowClick" :max-height="220" ref="selectAppTable">
                        <el-table-column type="index" label="序号" width="40" align="center"
                            :show-overflow-tooltip="true" />
                        <el-table-column prop="id" label="几何体ID" :show-overflow-tooltip="true" />

                        <el-table-column prop="name" label="名称" :show-overflow-tooltip="true" />
                    </el-table>
                </div>
                <div class="bottom">
                    <PaginatorCom :currentPage="pages.pageNum" :pageSize="pages.pageSize" :total="total"
                        @update:currentPage="handleCurrentChange" @update:pageSize="handleSizeChange" />
                </div>
            </div>
        </template>
    </DialogCom>
</template>
<script setup lang="ts">
import DialogCom from "@/components/common/DialogCom.vue";
import { watch, ref, onBeforeUnmount, onMounted,nextTick } from "vue";
import { getProjectManager } from "@/scripts/getProjectManager";
import {
    createVueDisposer,
    toVR,
} from "vue-xe2-plugin/dist-node/components/xe2/tools";
import { cellStyle, headCellStyle, cellStyleSmall, cellStyle2, } from "@/scripts/tableStyle";
import PaginatorCom from '@/components/common/PaginatorCom.vue';
import { BatchSet } from "@/scripts/cimrtsManager/batchSet";

const props = defineProps({
    isVisible: {
        type: Boolean,
        default: false,
    },
    close: {
        type: Boolean,
        default: false,
    },
    title: {
        type: String,
        default: "",
    },
    isGeometryId: {
        type: String,
        default: "",
    },
    currentDataSet: {
        type: String,
        default: "",
    }
});

const d = createVueDisposer(onBeforeUnmount);
const cimrtsManager = getProjectManager().cimrtsManager;



const batchSet = cimrtsManager.batchSet as BatchSet
// cimrts服务ip
const cimrtsIpRef = toVR(d, [cimrtsManager, "cimrtsIp"]);
const tileServiceNameRef = toVR(d, [cimrtsManager, "tileServiceName"]);

const total = ref(0)
const pages = ref({ pageNum: 1, pageSize: 5, })

// 几何库列表
const geometryRef = toVR<any>(d, [batchSet, "geometryLib"]);

const isHighLight = ref(-1)
const emits = defineEmits(["close", "confirm"]);
const selectTable = ref(null)
const idname = ref({ id: "", name: "" ,sourceType:''})

// 数据集列表
const dataSetRef = ref([]);
// 当前选中的数据集
const currentDataSetRef = ref("");

// 当前选中的数据源
const currentSource = ref("lib")

const currentChange = (item:any, index:number) => {
    isHighLight.value = index
    idname.value.id = item.id
    idname.value.name = item.name
    idname.value.sourceType = 'lib'

}

const selectAppTable:any =ref(null)

// 单击 列表上选择正在编辑的对象
const handleRowClick = async (row: any) => {
    idname.value.id = row.id
    idname.value.name = row.name
    idname.value.sourceType = 'dataset'

    nextTick(() => {
      selectAppTable.value?.setCurrentRow(row);
    });
}


/**
 * 监听当前页数变化
 * @param {number} val 
 */
const handleCurrentChange = async (val:any) => {
    pages.value.pageNum = val;
    //获取要素列表
    await getList()
}
/**
 * 监听当前页条数变化
 * @param {number} val 
 */
const handleSizeChange = async (val:any) => {
    pages.value.pageSize = val;
    //获取要素列表
    await getList()
}

// 关闭按钮
const close = () => {
    emits('close')
}
// 确认
const confirm = async () => {
    emits('confirm', idname.value)

}


//获取要素列表
const getList = async () => {
    const param = {
        datasetName: props.currentDataSet,
        ...pages.value,
    }
    const data = await batchSet.getFeatureList(param) as any
    dataSetRef.value = data.tableData
    total.value = data.total
}

onMounted(async () => {
    // 获取几何列表
    await batchSet.geometryLibList()
    //获取要素列表
    await getList()

    // if (props.isGeometryId) {
    //     setTimeout(() => {
    //         // 高亮当前行
    //         const index = props.geometryRef.findIndex(item => item.id == props.isGeometryId)
    //         const item = props.geometryRef[index]
    //         currentChange(item, index)
    //     }, 500)

    // }
})
</script>

<style scoped>
.is-active {
    border: 1px solid #409eff;
}

.lib-content {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 9px;
    height: 276px;
    overflow-y: auto;
}

.img-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.img {
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    padding: 10px;
}

.img img {
    width: calc(100%);
    height: calc(100%);
}

.name {
    width: 80px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 5px 0;
    text-align: center;
}

.select-table {
    height: calc(100% - 60px);
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.actived {
    color: #8383ff;
}

.source>span {
    cursor: pointer;
}

.dataset-content {
    display: flex;
    flex-direction: column;
    height: 276px;
    justify-content: space-between;
}

.xbsj-table {
    margin: 15px 0;
}

.bottom {
    display: flex;
    justify-content: center;
}
</style>